<template>
  <div class="flex">
    <div class="flex flex-col">
      <div v-for="(node, index) in modelValue" :key="node.id" class="flex flex-col">
        <!-- 节点编号（添加点击事件和选中样式） -->
        <div class="flex items-center">
          <div
            class="w-10 h-10 rounded-full border flex items-center justify-center cursor-pointer transition-all duration-200"
            :class="{
              'border-[#999] bg-white text-black': !isSelected(index),
              'border-blue-500 bg-blue-500 text-white': isSelected(index)
            }" @click="handleSelect(index)">
            {{ index + 1 }}
          </div>
        </div>

        <!-- 竖线 + 内容 + 删除 -->
        <div class="flex items-center">
          <div class="w-10 flex justify-center">
            <div class="w-px bg-gray-400 my-2" :style="{ minHeight: nodeHight + 'px' }"></div>
          </div>

          <!-- 右侧内容区 -->
          <div class="flex flex-col ml-6">
            <slot name="content" :node="node" :index="index" :selected="isSelected(index)"></slot>
          </div>

          <!-- 删除按钮 -->
          <IconSvg name="delete" v-if="modelValue.length > 1"
            class="h-[20px] w-[20px] text-[#323232] ml-[10px] cursor-pointer hover:text-red-500 "
            @click="removeNode(index)" />
        </div>

        <!-- 添加按钮（最后一个节点下方） -->
        <div class="flex justify-start" v-if="index == modelValue.length - 1">
          <div class="w-10 flex justify-center" @click="addNode">
            <div
              class="w-[25px] h-[25px] cursor-pointer border rounded-sm border-[#999] flex justify-center items-center bg-white hover:border-[#666]">
              <IconSvg name="add" class="h-[15px] w-[15px] text-[#999] hover:text-[#666]" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import IconSvg from "./IconSvg.vue";

const props = defineProps({
  modelValue: {
    type: Array,
    required: true,
  },
  nodeHight: {
    type: Number,
    default: 80,
  },
  // 允许外部设置选中项
  selectedIndex: {
    type: Number,
    default: -1
  }
});

const emit = defineEmits([
  "update:modelValue",
  "update:selectedIndex",  // 用于双向绑定选中索引
  "nodeSelected"           // 选中节点时触发的事件
]);

// 处理选中状态
const handleSelect = (index) => {
  // 更新选中索引
  emit('update:selectedIndex', index);
  // 触发选中事件，返回完整信息
  emit('nodeSelected', {
    index,
    node: props.modelValue[index],
    id: props.modelValue[index].id
  });
};

// 检查是否为选中状态
const isSelected = (index) => {
  return props.selectedIndex === index;
};

const addNode = () => {
  const newNode = { id: Date.now(), text: "" };
  const newList = [...props.modelValue, newNode];
  emit("update:modelValue", newList);

  // 选中新添加的节点
  emit('update:selectedIndex', newList.length - 1);
  emit('nodeSelected', {
    index: newList.length - 1,
    node: newNode,
    id: newNode.id
  });
};

const removeNode = (index) => {
  const newList = [...props.modelValue];
  newList.splice(index, 1);
  emit("update:modelValue", newList);

  // 如果删除的是选中项，自动调整选中状态
  if (props.selectedIndex === index) {
    const newSelectedIndex = newList.length > 0 ? Math.min(index, newList.length - 1) : -1;
    emit('update:selectedIndex', newSelectedIndex);

    if (newSelectedIndex !== -1) {
      emit('nodeSelected', {
        index: newSelectedIndex,
        node: newList[newSelectedIndex],
        id: newList[newSelectedIndex].id
      });
    }
  } else if (props.selectedIndex > index) {
    // 如果删除的是选中项前面的项，调整选中索引
    emit('update:selectedIndex', props.selectedIndex - 1);
  }
};
</script>
